<template>
	<div class="station">
		<van-nav-bar title="选择站点" />
		<div class="title">
			<b @click="dataSlice(0,defaultItem)">全国</b><b v-for="(p,item) in stationLevel" :key="p.id" @click="dataSlice(item+1,p)">&gt;{{p.name}}</b><span v-if="stationLevel.length>0&&flag<=5" @click="enterStation">进入当前行政站点</span>
		</div>

		<div class="cityList">
			<span class="list-item" v-for="index in list" :key="index.id" @click="selectStation(index)">
				{{index.name||index.sitename}}
			</span>
		</div>

		<p class="tips">
			<span class="t1">没有找到自己的小区怎么办？</span>
			<span class="t2">点击自助注册小区分站</span>
		</p>

	</div>


</template>
<script>
	export default {
		name: "Station",
		components: {

		},
		data() {
			return {
				province_id: 0,
				city_id: 0,
				area_id: 0,
				town_id: 0,
				stationLevel: [],
				list: [],
				flag: 0,
				defaultItem: {id:0},
				set_site_id:0,
				last:false
			}
		},
		mounted() {
			this.getProvince()
		},
		methods: {
			getProvince() {
				let stationdata = {}
				this.$api.home.siteFive(stationdata).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.flag = 1
						this.list = res.data
					}

				})
			},
			getCity() {
				let stationdata = {
					province_id: this.province_id
				}
				this.$api.home.siteFive(stationdata).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.flag = 2
						this.list = res.data
					}

				})
			},
			getArea() {
				let stationdata = {
					province_id: this.province_id,
					city_id: this.city_id
				}
				this.$api.home.siteFive(stationdata).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.flag = 3
						this.list = res.data
					}

				})
			},
			getTwon() {
				let stationdata = {
					province_id: this.province_id,
					city_id: this.city_id,
					area_id: this.area_id
				}
				this.$api.home.siteFive(stationdata).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.flag = 4
						this.list = res.data
					}

				})
			},
			getList() {
				let stationdata = {
					province_id: this.province_id,
					city_id: this.city_id,
					area_id: this.area_id,
					town_id: this.town_id
				}
				this.$api.home.siteFive(stationdata).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.flag = 5
						this.list = res.data
						
					}

				})
			},
			selectStation(item) {
				let id = item.id 
				this.set_site_id = item.site_id
				switch (this.flag) {
					case 0:
						this.last = false
						this.getProvince()
						break;
					case 1:
						this.last = false
						this.province_id = id
						this.getCity()
						break;
					case 2:
						this.last = false
						this.city_id = id
						this.getArea()
						break;
					case 3:
						this.last = false
						this.area_id = id
						this.getTwon()
						break;
					case 4:
						this.last = false
						this.town_id = id
						this.getList()
						break;
					case 5:
						this.last = true
						this.enterStation()
						break;
				}
				if (this.stationLevel.indexOf(item) == -1) {
					if (item.id == 0) {
						this.stationLevel = []
					} else {
						this.stationLevel.push(item)
					}

				} else {
					this.stationLevel = this.stationLevel.slice(0, this.flag)
				}


			},
			dataSlice(index, item) {
				this.flag = index
				this.selectStation(item)
			},
			//进入站点
			enterStation(){
				this.$api.home.siteInfo({site_id:this.set_site_id}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.$localStorage.set("site_id",this.set_site_id)
						if(this.last){
							this.$localStorage.set("siteType",3)
						}else{
							this.$localStorage.set("siteType",2)
						}
						this.$router.push({
							path:'/'
						})
					}else{
						this.$toast.fail(res.msg)
					}
				
				})
			}
		}


	}
</script>

<style scoped lang="less">
	.station {
		.title {
			height: 2.81rem;
			line-height: 2.81rem;
			padding: 0 1.22rem;
			font-size: 0.94rem;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(70, 70, 70, 1);

			span {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(254, 119, 0, 1);
			}

			b {
				font-size: 0.94rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(70, 70, 70, 1);
			}
		}

		.cityList {
			background: #fff;
			// padding: 0 1.19rem;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.list-item {
				font-size: 0.94rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				padding: 1rem 1.19rem;
				display: inline-block;
			}
		}

		.tips {
			margin-top: 4rem;
			text-align: center;

			.t1 {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(52, 52, 52, 1);
			}

			.t2 {
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FF8B3D;
			}
		}
	}
</style>
